import { useState, useImperativeHandle, forwardRef, useEffect, useRef } from 'react';
import { Input, Select } from 'antd';
import { InbizIcon, useApp } from '@inbiz/utils';
import { getVersionData } from './service';
import { compare } from './utils';
import TreeList from './components/TreeList';
import Vscode from './assets/Vscode';
import Version from './assets/Version';
import './style.less';
const { Option } = Select;

const Left = forwardRef((props: any, ref) => {
    const { isForm, setSelectedRow, siteInfo, queryRef } = props;
    const [searchText, setSearchText] = useState('');
    const [versionData, setVersionData] = useState<any[]>([]);
    const [selectLoading, setSelectLoading] = useState<boolean>(false);
    const [currentDataVersionId, setCurrentDataVersionId] = useState<string>('');
    const appInfo: any = useApp();
    const treeListRef = useRef<any>();

    const onSelectChange = (value: string) => {
        setCurrentDataVersionId(value);
        setSearchText('');
        queryRef?.current?.queryForm?.resetFields();
        queryRef?.current?.setCurrentType('0');
        treeListRef?.current?.getTreeData(false, { ...siteInfo, DataVersionId: value }, (dataVersionId: string) => {
            queryRef?.current?.getLangData({
                siteOutId: siteInfo?.OutId || '',
                dataVersionId: dataVersionId || '',
                queryLanguageType: 0,
                siteType: 1,
            });
        });
    };

    useEffect(() => {
        if (siteInfo) {
            setSelectLoading(true);
            getVersionData({ appId: appInfo?.appId, siteOutId: siteInfo?.OutId }).then((res) => {
                const _data = res?.map((item) => {
                    return {
                        label: item?.VersionNum,
                        value: item?.Id,
                        ...item,
                    };
                });
                let _currentVersionId: string = '';
                _currentVersionId = _data?.find((item) => item?.InUse === true)?.Id;
                if (!_currentVersionId) {
                    const __data = _data.sort(compare('LastModificationTime'));
                    _currentVersionId = __data?.[0]?.Id;
                };
                setCurrentDataVersionId(_currentVersionId);
                setVersionData(_data);
                setSelectLoading(false);
            }).catch(() => {
                setSelectLoading(false);
            });
        };
    }, [siteInfo, appInfo]);

    useImperativeHandle(ref, () => {
        return {
            searchText,
            setSearchText,
            currentDataVersionId,
            ...treeListRef?.current,
        }
    });

    return (
        <div className='inbiz-lang-manage-left'>
            {
                siteInfo
                &&
                <Select
                    bordered={false}
                    loading={selectLoading}
                    value={currentDataVersionId}
                    onChange={onSelectChange}
                >
                    {
                        versionData?.map((item) => {
                            return (
                                <Option key={item?.value} title={item?.label}>
                                    {
                                        <div className='inbiz-lang-manage-version-option'>
                                            <div>{item?.VersionType == '1' ? Vscode() : Version()}</div>
                                            <div>{'v' + item?.label}</div>
                                        </div>
                                    }
                                </Option>
                            )
                        })
                    }
                </Select>
            }
            <Input
                style={{ borderRadius: 4 }}
                value={searchText}
                onChange={(e) => {
                    setSearchText(e.target.value.trim());
                }}
                placeholder={'请输入搜索条件'}
                suffix={<InbizIcon type="icon-ic-sousuo" style={{ color: '#999' }} />}
            />
            <TreeList
                ref={treeListRef}
                queryRef={queryRef}
                searchText={searchText}
                isForm={isForm}
                siteInfo={siteInfo}
                setSelectedRow={setSelectedRow}
            />
        </div>
    )
});

export default Left;